<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>盒子集合--国科</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<script type="text/javascript" src="bootstrap/js/jquery-3.2.1.min.js"></script>
<style type="text/css">
	html,body {
		height: 100%;
	}
	.thumbnail{
	    -webkit-animation:animations 2s linear forwards;
	    -moz-animation:animations 2s linear forwards;
	    animation:animations 2s linear forwards;
	}
	@-webkit-keyframes animations{
	    0%{-webkit-transform:scale(0);opacity:0;}
	    40%{-webkit-transform:scale(0.8);opacity:1;}
	    100%{opacity:1;}
	}
	@-moz-keyframes animations{
	    0%{-moz-transform:scale(0);opacity:0;}
	    40%{-moz-transform:scale(0.8);opacity:1;}
	    100%{opacity:1;}
	}
	@keyframes animations{
	    0%{transform:scale(0);opacity:0;}
	    50%{transform:scale(0.8);opacity:1;}
	    100%{opacity:1;}
	}
	.page{
		height: 100%;
		width: 100%;
		background-image: url(image/lxi-list-back-1.jpg);
		background-size: cover;
	}
	.lxi-list-container{
		height:calc(100vh - 50px);
		height:-moz-calc(100vh - 50px);
		width:100%;
		padding:0 15%;
		overflow-y:auto;
		overflow-x:hidden;
		
	}
	.lxi-list{
		padding:11px 0px 0px;
		margin-bottom:-10px;
		text-align: center;
		background-color:rgba(255,255,255,0.8);
	}
	.lxi-list-title{
		height: 48px;
		line-height: 50px;
		font-size: 20px;
		color:white;
		background-color: #4A708B;
		box-shadow: 0px 0px 7px #607B8B;
	}
	.lxi-list-title .systemTime{
		display: inline-block;
		text-align: right;
		float: right;
		padding-right: 1%;
	}
	.btn-info{
		box-shadow: 0px 0px 8px white inset;
		border: none;
		color: #FFFFF0;
	}
</style>
</head>
<body>
	<div class = 'page'>
		<div class='lxi-list-title'>
			<div class = 'systemTime'>
				<span>时间:</span>
				<span id = 'systemTime'>1970-01-01 00:00:00</span>
			</div>
		</div>
		<div class='lxi-list-container'>
			<div class="row lxi-list">
			    <div class="col-sm-6 col-md-3">
			         <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：001&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.001</p>
		                    <a href="lxi-item.do" target="_blank" class="btn btn-info" role="button">查看详细</a> 
			            </div>
			         </div>
			    </div>
			    <div class="col-sm-6 col-md-3">
			        <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：002&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.002</p>
		                    <a href="lxi-item.do" target="_blank" class="btn btn-info" role="button">查看详细</a> 
			            </div>
			        </div>
			    </div>
			    <div class="col-sm-6 col-md-3">
			        <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：003&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.003</p>
		                    <a href="lxi-item.do" target="blank" class="btn btn-info" role="button">查看详细</a> 
			            </div>
			        </div>
			    </div>
			    <div class="col-sm-6 col-md-3">
			        <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：004&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.004</p>
		                    <a href="lxi-item.do" target="blank" class="btn btn-info" role="button">查看详细</a> 
			            </div>
			        </div>
			    </div>
			</div>
			<div class="row lxi-list">
			    <div class="col-sm-6 col-md-3">
			         <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：005&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.005</p>
		                    <a href="lxi-item.do" target="blank" class="btn btn-info" role="button">查看详细</a> 
			            </div>
			         </div>
			    </div>
			    <div class="col-sm-6 col-md-3">
			        <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：006&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.006</p>
		                    <a href="lxi-item.do" target="blank" class="btn btn-info" role="button">查看详细</a> 
			            </div>
			        </div>
			    </div>
			    <div class="col-sm-6 col-md-3">
			        <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：007&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.007</p>
		                    <a href="lxi-item.do" target="blank" class="btn btn-info" role="button">查看详细</a> 
			            </div>
			        </div>
			    </div>
			    <div class="col-sm-6 col-md-3">
			        <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：008&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.008</p>
		                    <a href="lxi-item.do" target="blank" class="btn btn-info" role="button">查看详细</a> 
			            </div>
			        </div>
			    </div>
			</div>
			<div class="row lxi-list">
			    <div class="col-sm-6 col-md-3">
			         <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：009&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.009</p>
		                    <a href="lxi-item.do" target="blank" class="btn btn-info" role="button">查看详细</a> 
			            </div>
			         </div>
			    </div>
			    <div class="col-sm-6 col-md-3">
			        <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：010&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.010</p>
		                    <a href="lxi-item.do" target="blank" class="btn btn-info" role="button">查看详细</a> 
			            </div>
			        </div>
			    </div>
			    <div class="col-sm-6 col-md-3">
			        <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：011&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.011</p>
		                    <a href="lxi-item.do" target="blank" class="btn btn-info" role="button">查看详细</a> 
			            </div>
			        </div>
			    </div>
			    <div class="col-sm-6 col-md-3">
			        <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：012&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.012</p>
		                    <a href="lxi-item.do" target="blank" class="btn btn-info" role="button">查看详细</a> 
			            </div>
			        </div>
			    </div>
			</div>
			<div class="row lxi-list">
			    <div class="col-sm-6 col-md-3">
			         <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：013&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.013</p>
		                    <a href="lxi-item.do" target="blank" class="btn btn-info" role="button">查看详细</a> 
			            </div>
			         </div>
			    </div>
			    <div class="col-sm-6 col-md-3">
			        <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：001&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.001</p>
		                    <a href="lxi-item.do" target="blank" class="btn btn-info" role="button">查看详细</a> 
			            </div>
			        </div>
			    </div>
			    <div class="col-sm-6 col-md-3">
			        <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：001&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.001</p>
		                    <a href="lxi-item.do" target="blank" class="btn btn-info" role="button">查看详细</a> 
			            </div>
			        </div>
			    </div>
			    <div class="col-sm-6 col-md-3">
			        <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：001&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.001</p>
		                   <a href="lxi-item.do" target="blank" class="btn btn-info" role="button">查看详细</a>
			            </div>
			        </div>
			    </div>
			</div>
			<div class="row lxi-list">
			    <div class="col-sm-6 col-md-3">
			         <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：001&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.001</p>
		                    <a href="lxi-item.do" target="blank" class="btn btn-info" role="button">查看详细</a> 
			            </div>
			         </div>
			    </div>
			    <div class="col-sm-6 col-md-3">
			        <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：001&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.001</p>
		                    <a href="lxi-item.do" target="blank" class="btn btn-info" role="button">查看详细</a> 
			            </div>
			        </div>
			    </div>
			    <div class="col-sm-6 col-md-3">
			        <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：001&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.001</p>
		                    <a href="lxi-item.do" target="blank" class="btn btn-info" role="button">查看详细</a> 
			            </div>
			        </div>
			    </div>
			    <div class="col-sm-6 col-md-3">
			        <div class="thumbnail">
			            <img src="image/lxi-box.png" alt="盒子图片"/>
			            <div class="caption">
			                <p>盒子编号：001&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：10.0.1.001</p>
		                    <a href="lxi-item.do" target="blank" class="btn btn-info" role="button">查看详细</a> 
			            </div>
			        </div>
			    </div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
/*<![CDATA[*/
	$(function(){
		var first=self.setInterval("clock()",1000);
		//var second=self.setInterval("getSystemInfo()",2000);
	});
	function clock(){
		var date = new Date();
		var year = date.getFullYear();
		var month = (date.getMonth() + 1)<10?"0"+(date.getMonth() + 1):date.getMonth() + 1;
		var day = date.getDate()<10?"0"+date.getDate():date.getDate();
		var hour = date.getHours()<10?"0"+date.getHours():date.getHours();
		var minute = date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes();
		var second = date.getSeconds()< 10?'0'+date.getSeconds():date.getSeconds();
		var currentTime = year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
		document.getElementById("systemTime").innerHTML=currentTime;
    }
/*]]>*/
</script>
</html>